<template>
  <div>
    <el-page-header @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3">
          {{ itemId ? $t("project.bank.modifyItem") : $t("project.bank.addQuestion") }}
        </span>
      </template>
      <template #extra>
        <div class="flex items-center mr20">
          <el-button
            size="default"
            class="first-btn"
            v-if="!itemId"
            @click="handleOpenImportItem"
          >
            <el-icon>
              <ele-Upload />
            </el-icon>
            {{ $t("formgen.topNav.importSubject") }}
          </el-button>
          <el-button
            class="ml-2"
            size="default"
            type="primary"
            @click="handleSaveItems"
          >
            {{ itemId ? $t("project.bank.modifyItem") : $t("project.bank.saveItem") }}
          </el-button>
        </div>
      </template>
    </el-page-header>
    <FormDesignCom
      ref="formDesignRef"
      :edit-form-info="false"
      :is-default="false"
    />
    <ImportFormItem
      ref="importItemsRef"
      :form-key="'default'"
      @success="handleAddItemList"
    />
  </div>
</template>
<script lang="ts" name="AddQuestion" setup>
import { nextTick, onMounted, provide, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { batchSaveQuestionBankItem, getQuestionBankItem, updateQuestionBankItem } from "@/api/question/bankItem";
import { removeHtmlTag } from "@/views/formgen/utils";
import { MessageUtil } from "@/utils/messageUtil";
import { i18n } from "@/i18n";
import ImportFormItem from "@/views/formgen/components/FormDesign/import/TextImportFormItem.vue";
import FormDesignCom from "@/views/formgen/components/FormDesign/index.vue";
import { formDesign } from "@/views/formgen/components/FormDesign/hooks/useFormDesign";

const route = useRoute();

const router = useRouter();
const formDesignRef = ref<any>(null);
const bankId = Number(route.query.id);
const itemId = Number(route.query.itemId);
const bankType = Number(route.query.type || 1);

const { formConf, drawingList, isAllowAdd } = formDesign;

const handleSaveItems = () => {
  if (!itemId) {
    const itemList = drawingList.value.map((item: any) => {
      return {
        bankId: bankId,
        itemType: item.typeId,
        label: removeHtmlTag(item.config.label),
        scheme: item
      };
    });
    batchSaveQuestionBankItem(itemList).then(() => {
      MessageUtil.success(i18n.global.t("formI18n.all.success"));
      goBack();
    });
  } else {
    updateQuestionBankItem({
      id: itemId,
      label: removeHtmlTag(drawingList.value[0]?.config?.label),
      scheme: drawingList.value[0]
    }).then(() => {
      MessageUtil.success(i18n.global.t("formI18n.all.success"));
      goBack();
    });
  }
};

onMounted(() => {
  isAllowAdd.value = true;
  // 如果是编辑会携带题目信息
  if (itemId) {
    isAllowAdd.value = false;
    getQuestionBankItem(itemId).then(res => {
      drawingList.value = [];
      drawingList.value.push(res.data.scheme);
      nextTick(() => {
        // 编辑隐藏全部
        // 隐藏 .drawing-item-operation-wrap
        let drawingItemOperationWrap = document.querySelectorAll(".drawing-item-operation-wrap");
        //隐藏全部带有这个样式的
        drawingItemOperationWrap.forEach((item: any) => {
          item.style.display = "none";
        });
      });
    });
  }
  formConf.value!.status = 2;
  formConf.value!.type = bankType;
});

const handleAddItemList = (list: any) => {
  if (list.length) {
    drawingList.value.push(...list);
  }
};

const importItemsRef = ref<any>(null);

const handleOpenImportItem = () => {
  importItemsRef.value.showDialog();
};
const goBack = () => {
  router.go(-1);
};
</script>
<style lang="scss" scoped>
:deep(.el-page-header__header) {
  line-height: 48px;
  box-shadow: var(--el-box-shadow);
  padding-left: 20px;
  background-color: #ffffff;
  border-bottom: var(--el-border);
}
</style>
